<script setup lang="ts">
import { useDetail } from "@/views/complain/utils/hooks";
import { onBeforeUnmount, ref, shallowRef } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { getComplain, replyComplain } from "@/api/property";
import "@wangeditor/editor/dist/css/style.css";
import { ElNotification } from "element-plus"; // 引入 css
defineOptions({
  name: "complainReply"
});
const { initToDetail, getParameter } = useDetail();
initToDetail("params");
const data = ref();
const editorRef = shallowRef();
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
const toolbarConfig: any = { excludeKeys: "fullScreen" };
const editorConfig = { placeholder: "请输入内容..." };
const mode = ref("default");

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const getInfo = () => {
  getComplain(getParameter.id).then(res => {
    data.value = res.data;
  });
};

const reply = () => {
  replyComplain(data.value).then(res => {
    if (res.code === 200)
      ElNotification({
        title: "Success",
        message: res.msg,
        type: "success"
      });
    else
      ElNotification({
        title: "Error",
        message: res.msg,
        type: "error"
      });
  });
};
getInfo();

</script>

<template>
  <div>
    <h1 style="text-align: center; padding-bottom: 10px">
      投诉单【{{ data.id }}】-详细信息
    </h1>
    <el-descriptions direction="vertical" :column="2" size="large" border>
      <el-descriptions-item label="用户ID" v-if="data.isAnonymous===false">{{ data.userId }}</el-descriptions-item>
      <el-descriptions-item label="投诉时间">
        {{ data.created }}
      </el-descriptions-item>
      <el-descriptions-item label="投诉内容" :span="2"
      >{{ data.content }}
      </el-descriptions-item>

    </el-descriptions>
    <br />
    <div>
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; width: 100%"
        v-model="data.reply"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
    <el-button type="primary" style="width: 100%;font-size: 20px;margin-top: 10px" @click="reply">提交</el-button>
  </div>
</template>

<style scoped lang="scss">

</style>
